@import "src/variables";

.plugin-list {
  &__container {
    height: auto;
    width: 100%;
  }

  &__item {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: $dark-background-color;
    color: $default-white;
    position: relative;
    font-weight: lighter;
    margin: 8px;
    -webkit-box-shadow: -1px 2px 13px 3px $default-black 20%;
    -moz-box-shadow: -1px 2px 13px 3px $default-black 20%;
    box-shadow: -1px 2px 13px 3px $default-black 20%;


    &-name {
      display: inline-block;
      clear: both;
      font-size: 18px;
      display: flex;

      span {
        padding: 8px;

        background: $default-black;
        margin: 0;
      }

      .triangle-background {
        display: inline-block;
        justify-self: flex-start;
        top: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-top: 0px solid transparent;
        border-bottom: 42px solid transparent;
        border-left: 40px solid $default-black;
        margin-right: -48px;
        margin-bottom: -8px;

      }
    }

    &-state {
      position: absolute;
      right: 0;
      top: 0;
      padding: 13px 8px;
      display: flex;

     span{
         color: $grey-font-color;
         margin-right:4px;
         &.activated{
             color:$default-white
         }
     }
      .state-loading-ring {
        display: block;
        border-radius: 50%;
        height: 23px;
        width: 23px;
        background: $inactive-color;
        border: 0.5px solid rgb(51, 51, 51);

        &.updating {
          &.state-loading-ring:after {
            opacity: 1;
          }
        }

        &.activated {
          background: $activated-color;
        }


      }

      .state-loading-ring:after {
        opacity: 0;
        display: block;
        content: " ";
        margin-top: -0.5px;
        height: 23px;
        width: 23px;
        justify-self: center;
        align-content: center;
        border-radius: 50%;
        border: 3px solid;
        border-color: $default-white  $dark-background-color $default-white $dark-background-color;
        animation: state-loading-ring 1.2s linear infinite;
      }


      @keyframes state-loading-ring {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

    }

    &-image {
      display: flex;
      align-content: center;
      margin-top: 8px;
      background: $plugin-background-color;

      align-content: center;


      img {
        height: 60px;
        width: auto;
        margin: 8px;
      }
    }

    &-field {
      position: relative;
      display: block;
      padding: 8px;
    }
    &-toggle-description{
        color: $default-white;
        opacity: 0.5;
        display: inline;
        margin-right: 8px;
        transition: opacity 300ms;

        &.extended{
          opacity: 0;
        }

    }
    &-toggle-button {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 8px;
      opacity: 0.8;
      display: flex;
      justify-content: center;
      cursor: pointer;

      img {
        height: 22px;
        width: 22px;
        -webkit-transition: transform 300ms;
        transition: transform 300ms;
        transform: rotate(90deg);
        &.extended {
          transform: rotate(0deg);

        }
      }
      &:hover {
        img{
          transform: rotate(85deg);
          opacity: 0.9;
             transform: rotate(85deg);
             &.extended {
              transform: rotate(0deg);
            }
        }
        .plugin-list__item-toggle-description{
          opacity: 0.8;
        }
      }

    }


    &-extension {
      background: $dark-background-color;
      height: 0px;
      transition: height 600ms;
      margin: 8px;
      border-bottom-right-radius: 5px;

      &.extended {
        border-top: 1px solid $default-black;
        height: auto;
        opacity: 1;
      }

      .configuration-container {
        color: $default-white;
        padding: 8px;

        &-header {
          font-size: 20px;
          color: $default-white;
          font-weight: normal;

        }

        &-field {
          position: relative;
          display: block;

          .title {
            font-weight: lighter;
            color: $grey-font-color;
          }
        }
      }
    }

    &.extended {
      // item in extended state
      -webkit-box-shadow: 0px 2px 5px -1px $default-black 75%;
      -moz-box-shadow: 0px 2px 5px -1px $default-black 75%;
      box-shadow: 0px 2px 5px -1px $default-black 75%;
      border-bottom-right-radius: 0px;
      margin-bottom: -8px;

    }


  }

}
